
<template>
	<div>
		<vue-ueditor-wrap v-model="content"
		                  :config="myConfig"
		                  @beforeInit="addCustomButtom"></vue-ueditor-wrap>
		<Modal v-model="modelSet.show"
		       style="z-index:9999"
		       class="imgs-manager"
		       width="90%"
		       :styles="{height: '80%' }"
		       title="选择图片"
		       @on-ok="insertImage">
			<ImgsManager
				ref="imgsmanager"
				@on-checked-imgs="onCheckedImgs"
			></ImgsManager>
		</Modal>
	</div>

</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import ImgsManager from '../../components/imgs-manager'
	const INSERT_IMG= 0;
	const INSERT_VIDEO= 1;
  export default {
    components: {
      VueUeditorWrap,
      ImgsManager
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      readonly: {
        type: Boolean,
        default: false
      },
      myConfig: {
        type: Object,
        default: () => ({
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 400,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
            UEDITOR_HOME_URL: '/UEditor/'
          }
        )
      }
    },
    data() {
      return {
        videoImg :'/ueditor/themes/default/images/spacer.gif',
        insertType: INSERT_IMG,
        tempSelectedImgs: null,
        modelSet: {
          show: false
        },
        imageList: [],
        editorHandler: null,
        content: this.value,
      }
    },
    methods: {
      onCheckedImgs(imgs) {
        this.tempSelectedImgs = imgs;
      },

      insertImage() {
        let vm = this;
        let imageList = this.tempSelectedImgs;
        let imageHtml = "";
        (imageList || []).map(item => {
          if(vm.insertType===INSERT_IMG){
            imageHtml = imageHtml + "<p><img src=\"" + vm.GLOBAL.getUrl(item)  + "\"/></p>";
          }else {
            // imageHtml = {url:vm.GLOBAL.BASE_OSS_URL+item,width:420,height:280};
	          imageHtml = imageHtml+"<p style='text-align: center'><video width='80%' controls src=\"" + vm.GLOBAL.getUrl(item) + "\"/></p>"
          }
        });
        if (imageHtml != "") {
          if(vm.insertType===INSERT_IMG){
            vm.editorHandler.execCommand('inserthtml', imageHtml);
          }else {
            // vm.editorHandler.execCommand('insertvideo', imageHtml );
            vm.editorHandler.execCommand('inserthtml', imageHtml );
          }
        }
        this.modelSet.show = false;
      },
      addCustomButtom(editorId) {
        let _this = this;
        window.UE.registerUI('insert-img', function (editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: () => {
              _this.imageList = [];
              _this.editorHandler = editor;
              _this.modelSet.show = true;
              _this.insertType = INSERT_IMG;
              _this.$nextTick(() => {
                _this.$refs.imgsmanager.reSet();
              });
              //editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`)
            }
          })

          // 创建一个 button
          var insertImgbtn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: '上传图片',
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules: "background-position: -380px 0;",
            // 点击时执行的命令
            onclick: function () {
              // 这里可以不用执行命令，做你自己的操作也可
              editor.execCommand(uiName)
            }
          })

          // 当点到编辑内容上时，按钮要做的状态反射
          editor.addListener('selectionchange', function () {
            var state = editor.queryCommandState(uiName)
            if (state === -1) {
              insertImgbtn.setDisabled(true)
              insertImgbtn.setChecked(false)
            } else {
              insertImgbtn.setDisabled(false)
              insertImgbtn.setChecked(state)
            }
          })

          // 因为你是添加 button，所以需要返回这个 button
          return insertImgbtn
        }, 47 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
        window.UE.registerUI('insert-video', function (editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: () => {
              _this.imageList = [];
              _this.editorHandler = editor;
              _this.modelSet.show = true;
              _this.insertType = INSERT_VIDEO;
              _this.$nextTick(() => {
                _this.$refs.imgsmanager.reSet();
              });
              //editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`)
            }
          })

          // 创建一个 button
          var btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: '插入视频',
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules: "background-position: -320px -20px;",
            // 点击时执行的命令
            onclick: function () {
              // 这里可以不用执行命令，做你自己的操作也可
              editor.execCommand(uiName)
            }
          })

          // 当点到编辑内容上时，按钮要做的状态反射
          editor.addListener('selectionchange', function () {
            var state = editor.queryCommandState(uiName)
            if (state === -1) {
              btn.setDisabled(true)
              btn.setChecked(false)
            } else {
              btn.setDisabled(false)
              btn.setChecked(state)
            }
          })

          // 因为你是添加 button，所以需要返回这个 button
          return btn
        },47)
      }
    },
    watch: {
      value(newValue) {
        this.content = newValue
      },
      content(newValue) {
        this.$emit('input', newValue)
      },
      readonly(newValue){
        this.myConfig.readonly = newValue
      }
    }
  }
</script>
